<template>
  <div class="main-index">
    <div class="main-index__left">
      <span class="main-index__title">模块接口如下：</span>
      <ul class="main-index__menu-root">
        <li v-for="(value, key) in configs" :key="key" class="main-index__menu-sub">
          <span class="main-index__sidebar-link main-index__current">{{key}}</span>
          <ul v-if="value" class="main-index__menu-sub">
            <li><span class="main-index__section-title">方法调用</span></li>
            <li v-for="method in value.Methods" :key="method.key">
              <a :class="{'main-index__section-link': true, 'main-index__current': (method === current)}" href="javascript:;" @click.stop.prevent="onItemClick(0, value.Key, method.key, method)">{{method.key}}</a>
            </li>
            <li><span class="main-index__section-title">事件回调</span></li>
            <li v-for="signal in value.Signals" :key="signal.key">
              <a :class="{'main-index__section-link': true, 'main-index__subed': isSubed(value.Key, signal.key), 'main-index__current': (signal === current)}" href="javascript:;" @click.stop.prevent="onItemClick(1, value.Key, signal.key, signal)">{{signal.key}}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="main-index__middle">
      <span class="main-index__title">{{kindDesc}}描述如下：</span>
      <div v-if="current" class="main-index__desc">
        <span>{{kindDesc}}：{{current.key}}</span>
        <span>描述：{{current.desc}}</span>
        <span>{{callDesc}}: {{callKey}}</span>
        <span>参数: {{argsDesc(current.args)}}</span>
        <span>返回: {{resultDesc(current.result)}}</span>
      </div>
      <div v-if="current && (kind === 1)" class="main-index__test">
        <span class="main-index__title">{{testTitle}}：</span>
        <div class="main-index__test__content">
          <input type="checkbox" id="check" class="check" v-model="subStatus"/>
          <label class="label" for="check"><span class="icon"></span><span class="txt">&nbsp; 关注事件</span></label>
        </div>
      </div>
      <div v-else-if="current && (kind === 0)" class="main-index__test">
        <span class="main-index__title">{{testTitle}}：</span>
        <div class="main-index__test__content">
          <div class="main-index__test__content__row">
            <span>调用参数:</span>
            <template v-if="current.args.length > 0">
              <input v-for="(arg, index) in current.args" :key="index" type="text" :arg-index="`arg${index}`" :placeholder="`${arg.name} arg${index}`"/>
            </template>
            <span v-else>无</span>
          </div>
          <a href="javascript:void(0);" class="main-index__test__content__btn" @click.stop.prevent="onExcuteClick($event)">开始执行</a>
        </div>
      </div>

      <span class="main-index__title">结果输出：</span>
      <div class="main-index__result">
        <div class="main-index__result__list"></div>
        <div class="main-index__result__ops">
          <a href="javascript:void(0);" @click.stop.prevent="onClearClick($event)">清空结果</a>
          <a href="javascript:void(0);" @click.stop.prevent="onUnSignalsClick($event)">取消事件</a>
        </div>
      </div>
    </div>
    <div class="main-index__right">
      <span class="main-index__title">测试进入频道：</span>
      <div class="main-index__right__ops">
        <input type="text" placeholder="sid" v-model="testSid"/>
        <input type="text" placeholder="ssid" v-model="testSSid"/>
        <input type="text" placeholder="是否YY频道" v-model="isYY"/>
        <a href="javascript:void(0);" @click.stop.prevent="onJoinChannelClick($event)">进入频道</a>
      </div>
    </div>
  </div>
</template>

<script>
import { kRoots, Main, kChannelUrl } from '@/common/'
import CircularJSON from 'circular-json'

export default {
  name: 'main-index',
  data () {
    return {
      current: null,
      kind: '',
      rootKey: '',
      key: '',
      args: [],
      events: {},
      testSid: 0,
      testSSid: 0,
      isYY: true
    }
  },
  components: {
  },
  computed: {
    configs () {
      return kRoots
    },
    kindDesc () {
      return this.kind !== 1 ? '方法' : '事件'
    },
    callDesc () {
      return this.kind !== 1 ? '调用' : 'Key'
    },
    testTitle () {
      return this.kind !== 1 ? '测试接口' : '测试事件'
    },
    callKey () {
      return this.makeKey(this.rootKey, this.key)
    },
    subStatus: {
      get () {
        return this.callKey in this.events
      },
      set (value) {
        if (value) {
          var key = this.callKey
          var self = this
          this.events[key] = function () {
            self.setEventBack(key, arguments)
          }
          this.subEvent(this.events[key])
        } else {
          this.unSubEvent(this.events[this.callKey])
          delete this.events[this.callKey]
        }
      }
    }
  },
  created () {
  },
  methods: {
    onItemClick (kind, rootKey, key, info) {
      this.kind = kind
      this.rootKey = rootKey
      this.key = key
      this.current = info
      this.args = []
    },
    argsDesc (args) {
      var result = '无'
      if (args.length > 0) {
        result = '('
        var index = 0
        var arg = ' arg'
        for (; index < args.length; ++index) {
          if (index > 0) {
            result += ', '
          }
          result += args[index].name
          result += (arg + index)
        }
        result += ')'
      }
      return result
    },
    resultDesc (result) {
      return result || '无'
    },
    setEventBack (key, args) {
      this.addResult(key + '事件回调：' + JSON.stringify(args))
    },
    addResult (text) {
      $('.main-index__result__list').append(`<span>${text}</span>`)
    },
    isSubed (rkey, key) {
      const ckey = this.makeKey(rkey, key)
      return ckey in this.events
    },
    onClearClick (e) {
      $('.main-index__result__list').empty()
    },
    onUnSignalsClick (e) {
      this.events = {}
    },
    onExcuteClick (e) {
      if (!this.current) return
      const exKey = this.callKey
      const root = Main.impl().root(this.rootKey)
      const args = []
      var i = 0
      for (; i < this.current.args.length; ++i) {
        var type = this.current.args[i]
        var value = $(`input[arg-index='arg${i}']`).val()
        switch (type.name) {
          case 'String': value = String(value || ''); break
          case 'Number': value = Number(value || 0); break
          case 'Boolean': value = Boolean(value || false); break
          case 'Object':
            try {
              value = CircularJSON.parse(value || '{}'); break
            } catch (error) {
              value = {}
            }
            break
          case 'Array':
            try {
              value = CircularJSON.parse(value || '[]'); break
            } catch (error) {
              value = []
            }
            break
        }
        args.push(value)
      }
      this.addResult(`${exKey} 方法调用：arg = ${CircularJSON.stringify(args)} 开始===================`)
      const result = root && root.excute(this.key, args)
      this.addResult(`${exKey} 方法调用：result = ${CircularJSON.stringify(result)} 返回===================`)
    },
    makeKey (rKey, key) {
      return `${rKey}.${key}`
    },
    subEvent (event) {
      if (!this.current) return
      const root = Main.impl().root(this.rootKey)
      root && root.onSignal(this.key, event)
    },
    unSubEvent (event) {

    },
    onJoinChannelClick (e) {
      if (!this.testSid) {
        return
      }
      const root = Main.impl().root(kRoots.Channel.Key)
      root && root.onSignal('onChannelJoined', function (arg1, arg2) {
        Main.impl().openWidow(kChannelUrl, 800, 600)
      })
      root && root.excute('joinChannel', [Number(this.testSid), Number(this.testSSid), true])
    }
  }
}
</script>

<style lang="scss">
@import "~@/css/common/_variables";
@import "~@/css/lib/_mixin";

.main-index {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  ul {
    list-style-type: none;
    margin: 0;
    line-height: 24px;
    padding-left: 10px;
  }
  &__menu-root {
    font-size: 13pt;
    padding-left: 0;
    li {
      margin-top: 5px;
    }
  }
  &__menu-sub {
    font-size: 12pt;
    margin-top: 10px;
  }
  &__sidebar-link {
    color: #7f8c8d;
  }
  &__section-title {
    color: black;
  }
  &__section-link {
    color: #7f8c8d;
    margin-left: 10px;
  }
  &__current {
    font-weight: 600;
    color: #42b983;
  }
  &__subed {
    font-weight: 700;
    color: #ff0000;
  }
  &__title {
    font-size: 12pt;
    margin-top: 10px;
  }
  &__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: white;
  }
  &__left {
    width: 400px;
    border-right: 1px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: scroll;
  }
  &__middle {
    width: 50%;
    border-right: 1px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  &__right {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    &__ops {
      width: 100%;
      height: 30px;
      margin: 10px;
      line-height: 50px;
      text-align: center;
      display: flex;
      flex-direction: row;
      a {
        width: 100px;
        height: 30px;
        border-radius: 5px;
        line-height: 30px;
        text-align: center;
        font-size: 11pt;
        background-color:#42b983;
        color: #ebebeb;
      }
    }
  }
  &__desc {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 20px;
    font-size: 11pt;
    color: black;
  }
  &__test {
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 20px;
    font-size: 11pt;
    &__content {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding: 10px 20px;
      &__row {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        input {
          width: 80px;
          height: 16px;
          font-size: 9pt;
          margin-left: 5px;
        }
      }
      &__btn {
        width: 100px;
        height: 30px;
        border-radius: 5px;
        line-height: 30px;
        text-align: center;
        font-size: 11pt;
        background-color:#42b983;
        color: #ebebeb;
      }
    }
  }
  &__result {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    &__list {
      width: 100%;
      height: 100%;
      background: black;
      color: white;
      display: flex;
      flex-direction: column;
      font-size: 10pt;
      padding: 10px;
      overflow: scroll;
      justify-content: flex-start;
    }
    &__ops {
      width: 100px;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 10px;
      a {
        width: 100%;
        height: 30px;
        border-radius: 5px;
        line-height: 30px;
        text-align: center;
        font-size: 11pt;
        background-color:#42b983;
        color: #ebebeb;
        margin-top: 10px;
      }
    }
  }
}

label {
  .icon{
    width:18px;
    height:18px;
    border-radius:2px;
    border: 2px solid #535559;
    vertical-align: middle;
    position:relative;javascript:void(0);
    cursor: pointer;
    display:inline-block;
    background:none;

    &:before, &:after {
      content:'';
      width:13px;
      height:2px;
      background:#ebebeb;
      position:absolute;
      -webkit-transition:all .2s ease-in-out 0s;
      transition:all .2s ease-in-out 0s;
    }
    &:before{
      left:0;
      width:6px;
      bottom:4px;
      -webkit-transform:scale(0) rotate(0);
      transform:scale(0) rotate(0);
    }
    &:after{
      top:6px;
      right:-1px;
      -webkit-transform:scale(0) rotate(0);
      transform:scale(0) rotate(0);
    }
  }

  .txt {
    line-height: 18px;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    font-size: 12px;
    color: #91969c;
  }
}
.check {
  display: none;
}
.check:checked + label {
  color:#ebebeb;
  .icon{
    background:#42b983;
    border: 2px solid #42b983;
    &:before {
      -webkit-transform:scale(1) rotate(45deg);
      transform:scale(1) rotate(45deg);
    }
    &:after {
      -webkit-transform:scale(1) rotate(-45deg);
      transform:scale(1) rotate(-45deg);
    }
  }
}
</style>
